<template>
    <view class="bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[40rpx] box-border">
       <view class="bind-mobile">
		   <view class="w-full">
			   
			   	<!-- #ifndef MP-WEIXIN -->
			   	<view>
			   		<view class="input-wrap">
			   			<view class="input">
			   				<u-field label-width="160" label="手机号" v-model="mobile" placeholder="请输入手机号"
			   					:input-border="false" />
			   			</view>
			   			<view class="input">
			   				<u-field label-width="160" label="短信验证码" v-model="code" placeholder="请输入验证码"
			   					:input-border="false">
			   					<view slot="right">
			   						<view class="sms-btn" @tap="sendSMS">
			   							<!-- 获取验证码 -->
			   							<u-verification-code unique-key="login" ref="uCode" @change="codeChange">
			   							</u-verification-code>
			   							<view class="xs">{{codeTips}}</view>
			   						</view>
			   					</view>
			   				</u-field>
			   			</view>
			   		</view>
			   		<button class="confirm-btn white br60" size="lg" @tap="bindMobile">确定</button>
			   	</view>
			   	<!-- #endif -->
			   	<!-- #ifdef MP-WEIXIN -->
			   	<view class="mnp-bind">
			   		<view class="avatar">
			   			<open-data type="userAvatarUrl"></open-data>
			   		</view>
			   		<view class="mt20 bold">微信授权手机号</view>
					<view class="mt-[40rpx]">
					    <u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary" shape="circle" > 一键绑定手机号 </u-button>
					</view>
			   		<!-- <button open-type="getPhoneNumber" class="bind-btn white br60" size="lg"
			   			@getphonenumber="getPhoneNumber">一键绑定手机号</button> -->
			   	</view>
			   	<!-- #endif -->
			   </view>
			   	
		   </view>
		
		<view class="w-full" v-if="false">
            <u-form borderBottom :label-width="150">
                <u-form-item label="手机号" borderBottom>
                    <u-input
                        class="flex-1"
                        v-model="formData.mobile"
                        :border="false"
                        placeholder="请输入手机号码"
                    />
                </u-form-item>
                <u-form-item label="验证码" borderBottom>
                    <u-input
                        class="flex-1"
                        v-model="formData.code"
                        placeholder="请输入验证码"
                        :border="false"
                    />
                    <view
                        class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
                        @click="sendSms"
                    >
                        <u-verification-code
                            ref="uCodeRef"
                            :seconds="60"
                            @change="codeChange"
                            change-text="x秒"
                        />
                        {{ codeTips }}
                    </view>
                </u-form-item>
            </u-form>
            <view class="mt-[40rpx]">
                <u-button type="primary" shape="circle" @click="handleConfirm"> 确定 </u-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { userBindMobile ,userMnpMobile} from '@/api/user'
import { smsSend } from '@/api/app'
import { SMSEnum } from '@/enums/appEnums'
import { reactive, ref, shallowRef } from 'vue'
import { useUserStore } from '@/stores/user'
const uCodeRef = shallowRef()
const codeTips = ref('')

const userStore = useUserStore()
const codeChange = (text: string) => {
    codeTips.value = text
}

const formData = reactive({
    type: 'bind',
    mobile: '',
    code: ''
})
const sendSms = async () => {
    if (!formData.mobile) return uni.$u.toast('请输入手机号码')
    if (uCodeRef.value?.canGetCode) {
        await smsSend({
            scene: SMSEnum.BIND_MOBILE,
            mobile: formData.mobile
        })
        uni.$u.toast('发送成功')
        uCodeRef.value?.start()
    }
}

// 微信小程序 绑定｜｜修改用户手机号
const getPhoneNumber = async (e): Promise<void> => {
    const { encryptedData, iv, code } = e.detail
    const data = {
        code,
        encrypted_data: encryptedData,
        iv,
    }
    if (encryptedData) {
        await userMnpMobile({
            ...data
        },{ token: userStore.temToken })
       uni.$u.toast('绑定成功')
       userStore.login(userStore.temToken!)
       setTimeout(() => {
           uni.navigateBack()
       }, 1500)
        // getUser()
    }
}
const handleConfirm = async () => {
    if (!formData.mobile) return uni.$u.toast('请输入手机号码')
    if (!formData.code) return uni.$u.toast('请输入验证码')
    await userBindMobile(formData, { token: userStore.temToken })
    uni.$u.toast('绑定成功')
    userStore.login(userStore.temToken!)
    setTimeout(() => {
        uni.navigateBack()
    }, 1500)
}
</script>

<style lang="scss">
page {
    height: 100%;
}

	.bind-mobile {
		padding: 20rpx 30rpx;
		text-align: center;

		.avatar {
			margin: 200rpx 0 60rpx;
			display: inline-block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 1px solid #eee;
			overflow: hidden;
		}

		.input-wrap {
			.input {
				padding-top: 20rpx;
			}
		}


		.sms-btn {
			text-align: center;
			border: 1px solid;
			width: 176rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
		
		}

		.confirm-btn {
			margin-top: 80rpx;
			
		}

		.bind-btn {
			margin-top: 80rpx;
			background: #09bb07;
		}

	}
</style>
